<template>
	<view class="address">
		<!-- 收货地址按钮 -->
		<view v-if="JSON.stringify(useraddres)==='{}'">
			<view class="button">
				<button type="primary" size="18" @click="setaddress">请选择收货地址 + </button>
			</view>	
		</view>
		<!-- 收货地址信息 -->
		<view class="setaddres" v-else>
			<view class="setaddres_top" @click="updateAddress">
					<view>收货人:<text class="phone">{{useraddres.userName}}</text></view>
					<view>电话:<text class="phone">{{useraddres.telNumber}}</text>
					<uni-icons class='icons' custom-prefix="custom-icon" type="arrowright" size="18"></uni-icons>
					</view>
			</view>
			<view class="setaddres_buttom">
				   <view>收货地址:{{addressatr}}</view>
			</view>
			
		</view>	
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
				
			};
		},
		methods:{
			setaddress(){//添加地址
				uni.chooseAddress().then(res=>{
					if(res[0]==null&&res.length==2){
					this.$store.commit('user/setaddress',res[1])
					return
					}					
				})
			},
			updateAddress(){//修改地址
				uni.chooseAddress().then(res=>{
					if(res.length==2){
						this.$store.commit('user/updateaddres',res[1])
					}
				})
			}
		},
		computed:{
			...mapState('user',['useraddres']),
			...mapGetters('user',['addressatr'])
		}
	}
</script>

<style lang="scss">
.address{border-bottom:2rpx #ccc solid;height: 188rpx;position: relative;}
.button{position: absolute;top:50%;left:50%;transform:translateX(-50%)translateY(-50%);button{color:#fff;font-size:30rpx;}}
.setaddres{display: flex;justify-content: space-between;flex-direction:column;height:100%;padding:0 20rpx;box-sizing: border-box;position: relative;}
.setaddres_top{display: flex;justify-content:space-between;view{height:59rpx;line-height:99rpx;}}
.setaddres_buttom view{height:99rpx;line-height:99rpx;}
.phone{margin:0 10rpx;}
</style>
